import React, {Component} from 'react';
import {Form, Button} from 'antd';

@Form.create()
export default class extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    handleSubmit = e => {
        e.preventDefault();
        const {form, onSubmit, config} = this.props;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            onSubmit(values, config, form);
        });
    };
    render() {
        const {config = [], buttonText = '查询', buttonLoading = false} = this.props;
        const {getFieldDecorator, getFieldsValue} = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} layout="inline">
                {config
                    .map((item, index) => {
                        let {
                            field,
                            label,
                            rules = [],
                            layout,
                            className,
                            initialValue,
                            Component,
                            updateInitialValue,
                            isDisabled,
                            noRender
                        } = item;
                        noRender = (noRender && noRender(getFieldsValue())) || false;
                        isDisabled = Boolean((isDisabled && isDisabled(getFieldsValue())) || false);
                        if (updateInitialValue) {
                            initialValue = updateInitialValue(getFieldsValue()) || initialValue;
                        }
                        layout =
                            layout ||
                            {
                                // labelCol: {
                                //     xs: { span: 14 },
                                //     sm: { span: 7 }
                                // },
                                // wrapperCol: {
                                //     xs: { span: 24 },
                                //     sm: { span: 12 },
                                //     md: { span: 10 }
                                // }
                            };
                        if (noRender) {
                            return null;
                        }
                        return (
                            <Form.Item key={`${field}-${index}`} {...layout} className={className || ''} label={label}>
                                {getFieldDecorator(field, {
                                    rules: rules,
                                    initialValue: initialValue
                                })(Component({disabled: isDisabled}))}
                            </Form.Item>
                        );
                    })
                    .filter(d => d)}
                <Form.Item>
                    <Button type="primary" loading={buttonLoading} htmlType="submit">
                        {buttonText}
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}
